<template>
	<div>
	    <div class="footer">
	    	<div class="left cc">  
	            <div class="cc" style="flex-direction: column;" @click="footLink(0)">
	            	<img src="../../../static/img/lanhu/27.png" alt="" class="c_icon" v-if="activeClass==0"/>
	            	<img src="../../../static/img/lanhu/02.png" alt="" class="c_icon" v-else/>集市
	            </div>
	    	</div>
	    	<div class="left cc">  
	            <div class="cc" style="flex-direction: column;position: relative;" @click="footLink(1)">
	            	<!--<div class="dot" v-if="count>0"></div>
	            	<img src="../../../static/img/lanhu/03.png" alt="" class="c_icon"/>消息-->
	            	<van-icon name="http://file.quanclubs.com/shoptest/image/88/c4/88c4079d665dd6639f1779d4a37cc282.png" 
	            		:badge="count" size="24" v-if="count>0"/>
	            	<van-icon name="http://file.quanclubs.com/shoptest/image/88/c4/88c4079d665dd6639f1779d4a37cc282.png" 
	            		 size="24" v-else/>	            		
	            	消息
	            </div>
	    	</div>
	
	    	<div class="left cc">  
	            <div class="cc" style="flex-direction: column;" @click="footLink(2)">
	            	<img src="../../../static/img/lanhu/04.png" alt="" class="c_icon"/>发布
	            </div>
	    	</div>
	
	    	<div class="left cc">  
	            <div class="cc" style="flex-direction: column;" @click="footLink(3)">
	            	<img src="../../../static/img/lanhu/05.png" alt="" class="c_icon" v-if="activeClass==3"/>
	            	<img src="../../../static/img/lanhu/28.png" alt="" class="c_icon" v-else/>管理
	            </div>
	    	</div>
	    </div> 
    </div>
</template>

<script>	
import {getFun} from '@/api/publicFun.js'
let publicFun=getFun()
export default {
  name: 'footers',	  
  data() {
   return {
     activeClass:0,
     count:0,
     url:this.$api+'/marketorderservice/api/v1/market/selectNoticeNoRead', // 未读的消息数
     url9:this.$api+'/marketorderservice/api/v1/market/goods/draftGoodsInfo', // 获取草稿箱
     timer:null,
     userId:''
   }
  },
  methods:{
  	interval(){  		
  		let that=this
		this.timer=setInterval(function(){
			that.$Axios2.Get(that.url+'/'+that.userId).then(function(res) {		
				that.count=res.data.activityCount+res.data.interactionCount+res.data.noticeCount
			}) 		
		},5000)	  		
  	},
  	clear(){
  		clearInterval(this.timer)
  	},  	
    footLink(num){
    	if(num==this.activeClass){
    		return false
    	}else{
			switch(num) {
			     case 0:
			        this.link('/')
			        break;
			     case 1:
                    this.goMessage()
			        break;
			     case 2:
			        let that=this
			        let name=this.$router.currentRoute.name
			        let backType
			        if(name=="index"){
			        	backType=1
			        }else if(name=="managerIndex"){
			        	backType=2
			        }
			        let arg='[{"backType":"'+backType+'"}]'
			        that.link('/market/goods/release',arg)			        
			        break;
			     case 3:
			        this.link('/market/manager/index')
			        break;			        
			} 
    	}
    }
  },
  mixins:[publicFun],//混入
  mounted(){
  	let name=this.$router.currentRoute.name
  	if(name=="index"){
  		this.activeClass=0
  	}else if(name=='managerIndex'){
  		this.activeClass=3
  	}
  	let that=this
  	let userId=this.$router.currentRoute.query.userId
  	this.userId=this.$router.currentRoute.query.userId
	this.$Axios2.Get(this.url+'/'+userId).then(function(res) {		
		that.count=res.data.activityCount+res.data.interactionCount+res.data.noticeCount
	})	
  }
}
</script>

<style scoped="">
.cc{display: flex;justify-content: center;align-items: center;}
.footer{height: 50px;position: fixed;background: #fff;z-index: 101;
bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-between;}
.c_icon{display: block;width: 22px;height: 22px;margin-bottom: 4px;}
.left{width: 25%;}
.dot{width: 6px;height: 6px;border-radius: 50%;background-color: #ee0a24;position: absolute;top: 3px;right: 3px;}
/*.dot{position: absolute;top: 0;right: 0;box-sizing: border-box;min-width: 16px;padding: 0 3px;color: #fff;
font-weight: 500;font-size: 12px;line-height: 14px;
text-align: center;background-color: #ee0a24;border: 1px solid #fff;border-radius: 16px;-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);-webkit-transform-origin: 100%;transform-origin: 100%;}*/
</style>